<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="<c:url value="/assets/js/ezops/fieldmapping.js"/>"></script>
<script type="text/javascript">
	$(document).ready(function(){
		 /**
         * To handle left menu toggle on page load
         */
    	$('#referencedata_li').addClass('root-level has-sub opened');
    	$('#referencedata_li_ul').toggle('click').addClass('visible');
    	$('#referencedata_li_ul').attr('style','');
        $('#referencedata_li_ul_li_' + 2).attr('style','font-weight: bold;');		
	});
</script>
<div class="panel panel-default" id="fieldmapping">
	<div class="panel-heading">
		<div class="panel-title">
			<div class="pull-left">
				<strong>EZOPS</strong>
			</div>
		</div>
	</div>
	<!-- /.panel-heading -->
	<div class="panel-body">
		<table>
			<tr>
				<td><label class="pull-left" style="line-height: 30px;"><b>&nbsp;&nbsp;Client&nbsp;&nbsp;</b></label>
				</td>
				<td>
					<div id='clientJqxWidget'>
					</div> 
					<!-- <div>
						<select id="ezopsclient-class" style="width: 150px;"
							
							class="jqx-widget jqx-dropdownlist-state-normal jqx-rc-all jqx-fill-state-normal jqx-dropdownlist-state-selected jqx-fill-state-pressed jqx-rc-b-expanded">
							<option value="select">Please Choose:</option>
						</select>
					</div> -->
				</td>
			</tr>
		</table>
		<div class="pull-right exporticon-panel"
			style='margin: 0 1% 10px 10px;'>
			<label>Export</label> <a
				class="btn btn-primary btn-sm btn-icon icon-left excelExport"
				href="<c:url value="/fileuploaddownload/exportcsvandexcel?exportFileFormat='excel'"/>">
				<i class="fa fa-file-excel-o"></i> Excel
			</a> <a class="btn btn-orange btn-sm btn-icon icon-left csvExport"
				href="#"> <i class="fa fa-file-pdf-o"></i> PDF
			</a>
		</div>
		<div class="importicon-panel" style='margin: 0 1% 10px 10px;'>
			<label>Import</label> <a
				class="btn btn-orange btn-sm btn-icon icon-left" href="#"
				id='fieldsImport' data-target="#importFieldsModal"
				data-toggle="modal"> <i class="fa fa-file-excel-o"></i> Excel
			</a>
		</div>
		<div id='fieldmappinggridparent'>
			<div id="fieldmappinggrid" style="clear: both; margin: 20px 0;"></div>
			<a class="btn btn-default btn-icon icon-left"
				data-bind="click: addRulesRow"> <i class="entypo-plus"></i> Add
				Row
			</a> <a class="btn btn-default btn-icon icon-left"
				data-bind="click: deleteRow"> <i class="entypo-minus"></i>
				Delete Selected Row
			</a> <a class="btn btn-default btn-icon icon-left"
				data-bind="click: saveOrUpdateRulesRow"> <i
				class="entypo-database"></i> SaveUpdate
			</a>
		</div>
	</div>
</div>